<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>首页 - VR-IoT</title>
        <!-- 国际化支持 -->
        <script src="../../pwa-main/js/i18n.js"></script>
        <!-- 框架通信SDK -->
        <script src="../../pwa-main/js/frame-sdk.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                background-color: #f5f5f5;
                color: #333;
                transition: background-color 0.3s, color 0.3s;
                padding: 16px;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            
            body.dark-theme {
                background-color: #1e1e1e;
                color: #e0e0e0;
            }
            
            .container {
                text-align: center;
                max-width: 600px;
                width: 100%;
            }
            
            .logo {
                width: 120px;
                height: 120px;
                margin: 0 auto 32px;
                background: linear-gradient(135deg, #007bff, #00d4ff);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 48px;
                color: white;
            }
            
            h1 {
                font-size: 32px;
                margin-bottom: 16px;
            }
            
            p {
                font-size: 16px;
                color: #666;
                margin-bottom: 32px;
                line-height: 1.6;
            }
            
            body.dark-theme p {
                color: #aaa;
            }
            
            .action-buttons {
                display: flex;
                gap: 16px;
                justify-content: center;
                flex-wrap: wrap;
            }
            
            .btn {
                padding: 12px 24px;
                border: none;
                border-radius: 8px;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
                transition: background-color 0.3s, transform 0.2s;
            }
            
            .btn-primary {
                background-color: #007bff;
                color: white;
            }
            
            .btn-primary:hover {
                background-color: #0056b3;
                transform: translateY(-2px);
            }
            
            .btn-secondary {
                background-color: white;
                color: #007bff;
                border: 1px solid #007bff;
            }
            
            body.dark-theme .btn-secondary {
                background-color: #2d2d2d;
                border-color: #007bff;
            }
            
            .btn-secondary:hover {
                background-color: #f8f9fa;
                transform: translateY(-2px);
            }
            
            body.dark-theme .btn-secondary:hover {
                background-color: #3d3d3d;
            }
            
            .features {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 24px;
                margin-top: 48px;
                width: 100%;
            }
            
            .feature-item {
                background-color: white;
                padding: 24px;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                transition: transform 0.3s;
            }
            
            body.dark-theme .feature-item {
                background-color: #2d2d2d;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }
            
            .feature-item:hover {
                transform: translateY(-4px);
            }
            
            .feature-icon {
                font-size: 36px;
                margin-bottom: 16px;
            }
            
            .feature-title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 8px;
            }
            
            .feature-desc {
                font-size: 14px;
                color: #666;
            }
            
            body.dark-theme .feature-desc {
                color: #aaa;
            }
        </style>
    </head>
<body data-auto-init-sdk="true">
        <div class="container">
            <div class="logo">🏠</div>
            <h1 data-i18n="home.title">VR-IoT</h1>
            <p data-i18n="home.welcome">欢迎使用VR-IoT应用，这里是您智能家居的控制中心。通过VR技术，体验全新的智能家居交互方式。</p>
        
        <div class="action-buttons">
                <button class="btn btn-primary" id="exploreBtn" data-i18n="home.explore">开始探索</button>
                <button class="btn btn-secondary" id="guideBtn" data-i18n="home.guide">使用指南</button>
            </div>
        
        <div class="features">
                <div class="feature-item">
                    <div class="feature-icon">🤖</div>
                    <div class="feature-title" data-i18n="home.aiAssistant">AI助手</div>
                    <div class="feature-desc" data-i18n="home.aiAssistantDesc">智能语音控制，让家居设备听从您的指令</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🎮</div>
                    <div class="feature-title" data-i18n="home.deviceControl">设备控制</div>
                    <div class="feature-desc" data-i18n="home.deviceControlDesc">集中管理所有智能设备，一键控制</div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon">🔍</div>
                    <div class="feature-title" data-i18n="home.discover">发现</div>
                    <div class="feature-desc" data-i18n="home.discoverDesc">探索最新的智能家居技术和使用技巧</div>
                </div>
            </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 预加载设置变量
            let preloadSettings = null;
            
            // 监听预加载设置消息
            window.addEventListener('message', (event) => {
                if (event.data && event.data.type === 'PRELOAD_SETTINGS') {
                    console.log('接收到预加载设置:', event.data.settings);
                    preloadSettings = event.data.settings;
                    
                    // 如果i18n已经加载，立即应用预加载设置
                    if (window.i18n && preloadSettings.language) {
                        window.i18n.setLanguage(preloadSettings.language);
                    }
                }
            }, { once: true });
            
            // 更新页面标题的函数
            function updatePageTitle() {
                if (window.i18n && window.frameSDK) {
                    const title = window.i18n.t('home.title');
                    window.frameSDK.updateTitle(title);
                    document.title = title + ' - VR-IoT';
                    console.log('页面标题已更新:', title);
                }
            }
            
            // 设置页面标题
            if (window.frameSDK && window.i18n) {
                updatePageTitle();
            }
            
            // 初始化交互元素
            const exploreBtn = document.getElementById('exploreBtn');
            const guideBtn = document.getElementById('guideBtn');
            
            // 事件监听
            exploreBtn.addEventListener('click', () => {
                // 可以跳转到控制页面
                if (window.parent) {
                    window.parent.postMessage({
                        type: 'NAVIGATE',
                        page: 'control'
                    }, '*');
                }
            });
            
            guideBtn.addEventListener('click', () => {
                // 可以跳转到发现页面
                if (window.parent) {
                    window.parent.postMessage({
                        type: 'NAVIGATE',
                        page: 'discovery'
                    }, '*');
                }
            });
            
            // 初始化页面后更新所有翻译元素
            if (window.i18n) {
                window.i18n.updateAllElements();
            }
            
            // 监听语言变更事件，更新页面标题和翻译元素
            window.addEventListener('languageChanged', () => {
                console.log('检测到语言变更事件');
                if (window.i18n) {
                    updatePageTitle();
                    window.i18n.updateAllElements();
                }
            });
            
            // 确保主框架语言变更时也能更新
            if (window.frameSDK) {
                window.frameSDK.on('SETTINGS_UPDATE', (settings) => {
                    if (settings.language && window.i18n) {
                        console.log('接收到SETTINGS_UPDATE消息，语言变更为:', settings.language);
                        // 当收到设置更新时，i18n.setLanguage已经被调用，languageChanged事件会被触发
                        // 这里不需要额外调用updatePageTitle，让事件监听器处理即可
                    }
                });
            }
            
            // 监听页面切换时的标题刷新请求
            window.addEventListener('message', (event) => {
                if (event.data && event.data.type === 'REFRESH_TITLE') {
                    console.log('接收到标题刷新请求');
                    updatePageTitle();
                }
            });
        });
    </script>
</body>
</html>